﻿@using Think9.Models;
@model Think9.Models.ReportCellsEntity;
@{ ViewBag.Title = @ViewBag.rpName + " - 第" + @ViewBag.n + "列";
    Layout = "~/Areas/Shared/_LayuiList.cshtml"; }

<form class="layui-form" lay-filter="formUser">
    <input style="display: none" id="rowId" value="@ViewBag.rowId">
    <input style="display: none" id="rpId" value="@ViewBag.rpId">
    <input style="display: none" id="colN" value="@ViewBag.colN">

    <div class="layui-tab" lay-filter="tabDemo">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">@ViewBag.postion</li>
            <li lay-id="2">参数赋值(@ViewBag.ParmNum)</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">左边框</label>
                        <div class="layui-input-block">
                            <select name="Left" id="Left">
                                <option value="1">显示</option>
                                <option value="2">不显示</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">右边框</label>
                        <div class="layui-input-block">
                            <select name="Right" id="Right">
                                <option value="1">显示</option>
                                <option value="2">不显示</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">上边框</label>
                        <div class="layui-input-block">
                            <select name="Top" id="Top">
                                <option value="1">显示</option>
                                <option value="2">不显示</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">下边框</label>
                        <div class="layui-input-block">
                            <select name="Bottom" id="Bottom">
                                <option value="1">显示</option>
                                <option value="2">不显示</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">水平排列</label>
                        <div class="layui-input-block">
                            <select name="HorizontalAlign" id="HorizontalAlign">
                                <option value="1">中</option>
                                <option value="2">左</option>
                                <option value="3">右</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">垂直排列</label>
                        <div class="layui-input-block">
                            <select name="VerticalAlign" id="VerticalAlign">
                                <option value="1">中</option>
                                <option value="2">上</option>
                                <option value="3">下</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">文本方向</label>
                        <div class="layui-input-block">
                            <select name="WriteDirection" id="WriteDirection">
                                <option value="1">水平</option>
                                <option value="2">垂直</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-col-md5">
                        <label class="layui-form-label" style="width:80px;">选择</label>
                        <div class="layui-input-block" style="margin-left:80px;">
                            <input type="radio" name="selectSort" value="1" title="固定字符" id="Sort_1" lay-filter="selectSort">
                            <input type="radio" name="selectSort" value="2" title="统计指标/条件参数" id="Sort_2" lay-filter="selectSort">
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-input-block">
                            <input type='text' id="_selectText" autocomplete='off' class='layui-input' placeholder='请输入字符'>
                            <input type='text' id="_selectValue" style="display: none">
                            <span style="position: absolute;top: 0px; left: -5px;">
                                <a href='javascript:;' class="layui-btn-xs" style="color: #FE7300;" id="lookIndex" lay-tips="点击查看"><i class="fa fa-question-circle-o"></i></a>
                            </span>
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <button type='button' class='layui-btn layui-btn-normal' id='editIndex' lay-submit lay-filter='editIndex' lay-tips='将单元格设置为字符或者统计指标'>编辑单元格</button>
                    </div>
                </div>
                <div id="divShowSelect" style="display: none;">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select id="IndexSort" name="IndexSort" lay-filter="IndexSort">
                                <option value="">==请选择指标分类==</option>
                                @foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.IndexSort))
                                {
                    <option value="@item.Value">@item.Text</option>
}
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type='text' name="key" id="key" autocomplete='off' class='layui-input' placeholder='请输入查询关键字'>
                        </div>
                        <div class="layui-input-inline">
                            <button type='button' class='layui-btn layui-btn-primary' id='searchIndex' lay-submit lay-filter='searchIndex'><i class='layui-icon layui-icon-search'></i></button>
                            <button type='button' class='layui-btn layui-btn-normal' id='addIndex' lay-tips="新建指标"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <table class="layui-hide" id="indexORParmList" lay-filter="tableFilter"></table>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <blockquote class="layui-elem-quote layui-text">
                    统计指标中使用的条件参数需要被赋值，赋值的方式包括：1.在统计指标出现的位置,即统计表单元格中赋值; 2.定义动态行为参数赋值; 3.定义查询参数为参数赋值;优先级为1>2>3
                </blockquote>
                <div class="layui-form-item">
                    <div class="layui-col-md3">
                        <label class="layui-form-label required">选择参数</label>
                        <div class="layui-input-block">
                            <select id="ParmId" name="ParmId" style="width:100%" lay-filter="selectfilter">
                                <option value="">==请选择参数==</option>
                                @foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.ParmSort))
                                {
                    <option value="@item.Value">@item.Text</option>
}
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label required">参数值</label>
                        <div class="layui-input-block">
                            <input type='text' id="parmValue" autocomplete='off' class='layui-input' placeholder='请输入参数值'>
                        </div>
                    </div>
                    <div class="layui-col-md2">
                        <button type='button' class='layui-btn layui-btn-normal' id='addParm' lay-submit lay-filter='addParm'>添加参数</button>
                    </div>
                    <div class="layui-col-md3">
                        <input type="checkbox" id="isDel" name="isDel" title="删除同名参数再添加">
                    </div>
                </div>
                <div class="layui-form-item">
                    <table class="layui-hide" id="parmList" lay-filter="tableFilter"></table>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="~/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(["table", "element", "form", "exLayer", "exUtils"], function () {
        let table = layui.table;
        let form = layui.form;
        let exLayer = layui.exLayer;
        let exUtils = layui.exUtils;
        let element = layui.element;

        let $ = layui.$;

        element.on('tab(tabDemo)', function (data) {

        });

        form.render();

        form.val("formUser", {
            "Left": "@Model.Left"
            ,"Right": "@Model.Right"
            ,"Top": "@Model.Top"
            ,"Bottom": "@Model.Bottom"
            ,"HorizontalAlign": "@Model.HorizontalAlign"
            ,"VerticalAlign": "@Model.VerticalAlign"
            ,"WriteDirection": "@Model.WriteDirection"
            ,"selectSort": "@Model.IndexType"
        });

        getFormVal();

        function getFormVal() {
            if (@Model.IndexType == "2") {
                $("#divShowSelect").attr("style", "display:block;");
                $("#_selectText").attr("readonly", "readonly");
                $("#_selectText").attr("placeholder", "请选择指标或参数，选择完成后需点击编辑按钮");

                $("#_selectText").val("@Model.IndexName");
                $("#_selectValue").val("@Model.IndexId");
            }
            else {
                $("#divShowSelect").attr("style", "display:none;");
                $("#_selectText").removeAttr("readonly");
                $("#_selectText").attr("placeholder", "请输入字符");

                $("#_selectValue").val('');
                $("#_selectText").val("@Model.IndexName");
            }
        }

        form.on('radio(selectSort)', function (data) {
            var _sort = $('input:radio[name="selectSort"]:checked').val();
            if (_sort == "2") {
                $("#divShowSelect").attr("style", "display:block;");
                $("#_selectText").attr("readonly", "readonly");
                $("#_selectText").attr("placeholder", "请选择指标或参数");
            }
            else {
                $("#divShowSelect").attr("style", "display:none;");
                $("#_selectText").removeAttr("readonly");
                $("#_selectText").attr("placeholder", "请输入字符");
                $("#_selectValue").val('');
            }
        });

        let indexORParmListTable = table.render({
            elem: "#indexORParmList",
            url: "/SysStats/IndexStats/GetIndexORParmListBySearch?sort=" + $("#IndexSort").val() + "&key=" + $("#key").val(),
            toolbar: "#toolbarTpl",
            defaultToolbar: [{ title: '显示所有', layEvent: 'refresh', icon: 'layui-bg-gray layui-icon-refresh' }],
            limits: [10, 50, 100],
            limit: 10,
            method: "POST",
            page: true,
            cols: [[
                { title: "选择", width: 80, align: "center", fixed: layui.device().mobile ? null : 'right', templet: "#operation_Tpl" },
                { field: "Value", title: "编码" },
                { field: "Text", title: "名称" },
                { title: "", width: 60, templet: "#operation_Tp2" },
            ]],
            done: function (res, curr, count) {
                /* $('th').hide();//表头隐藏的样式*/
            }
        });

        let parmListTable = table.render({
            elem: "#parmList",
            url: "/SysStats/ReportRows/GetReportParmByRowIDAndColNum?rowId=" + $("#rowId").val() + "&rpId=" + $("#rpId").val() + "&colNum=" + $("#colN").val(),
            toolbar: "#toolbarTp2",
            defaultToolbar: [{ title: '刷新', layEvent: 'refreshParm', icon: 'layui-bg-gray layui-icon-refresh' }],
            limits: [10, 50, 100],
            limit: 10,
            method: "POST",
            page: true,
            cols: [[
                { type: "checkbox" },
                { field: "Description", title: "行列", sort: true },
                { field: "ParmName", title: "参数名", sort: true },
                { field: "ParmId", title: "参数ID", sort: true },
                { templet: "<span>=</span>", width: 40, align: "center" },
                { field: "ParmValue", title: "参数值", sort: true }
            ]],
            done: function (res, curr, count) {
                /*$('th').hide();//表头隐藏的样式*/
            }
        });

        //选择指标或参数
        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "selectIndex":
                    $("#_selectText").val(data.Text);
                    $("#_selectValue").val(data.Value);
                    document.body.scrollTop = document.documentElement.scrollTop = 0;
                    break;
                case "indexDetails":
                    exLayer.openMiddle(data.Text, "/SysStats/IndexStats/ShowIndexDetails?id=" + data.Value, '500px', '350px', layui.device().mobile);
                    break;
            }
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "refresh":
                    $("#IndexSort").val("");
                    $("#key").val("");
                    indexORParmListTable.reload({
                        url: "/SysStats/IndexStats/GetIndexORParmListBySearch?sort=" + $("#IndexSort").val() + "&key=" + $("#key").val(),
                        page: { curr: 1 }
                    });
                    break;
                case "refreshParm":
                    parmListTable.reload({
                        url: "/SysStats/ReportRows/GetReportParmByRowIDAndColNum?rowId=" + $("#rowId").val() + "&rpId=" + $("#rpId").val() + "&colNum=" + $("#colN").val(),
                        page: { curr: 1 }
                    });
                    break;
                case "batchDelParm":
                    batchDelParm();
                    break;
            }
        });

        //查询指标
        form.on("submit(searchIndex)", function (data) {
            indexORParmListTable.reload({
                url: "/SysStats/IndexStats/GetIndexORParmListBySearch?sort=" + $("#IndexSort").val() + "&key=" + $("#key").val(),
                page: { curr: 1 }
            });
            return false;
        });

        //查看指标
        $('#lookIndex').on('click', function () {
            var sort = "";
            if ($("#_selectValue").val() == null || $("#_selectValue").val() == '') {
                sort = "字符 - " + $("#_selectText").val();
            }
            else {
                if ($("#_selectValue").val().indexOf('@@') > -1) {
                    sort = "条件参数 - " + $("#_selectText").val();
                }
                else {
                    sort = "统计指标 - " + $("#_selectText").val();
                }
            }

            exLayer.openMiddle(sort, "/SysStats/IndexStats/ShowIndexDetails?id=" + $("#_selectValue").val(), '500px', '300px', layui.device().mobile);
        });

        //编辑
        form.on("submit(editIndex)", function (data) {
            //左、右、上、下(边框)+水平、垂直(排列)+文字方向
            var _state = $("#Left").val() + $("#Right").val() + $("#Top").val() + $("#Bottom").val() + $("#HorizontalAlign").val() + $("#VerticalAlign").val() + $("#WriteDirection").val();
            var _sort = $('input:radio[name="selectSort"]:checked').val();
            exUtils.ajax("/SysStats/ReportRows/EditCells", "post", { rpId: $("#rpId").val(), rowId: $("#rowId").val(), value: $("#_selectValue").val(), text: $("#_selectText").val(), sort: _sort, colNum: $("#colN").val(), state: _state  }, true).done(function (response) {
                exLayer.greenTickMsg(response.message, function () {

                });
            }).fail(function (error) {
                console.log(error);
            });
            return false;
        });

        form.on("submit(addParm)", function (data) {
            var parmId = $("#ParmId").val();
            if (parmId == '') {
                layer.msg('请选择参数');
                return false;
            }
            var isDel = $("#isDel").prop("checked");
            exUtils.ajax("/SysStats/ReportRows/AddCellsParm", "post", { rpId: $("#rpId").val(), rowId: $("#rowId").val(), colNum: $("#colN").val(), parmId: parmId, parmValue: $("#parmValue").val(), isDel: isDel }, true).done(function (response) {
                exLayer.greenTickMsg(response.message, function () {
                    parmListTable.reload({
                        url: "/SysStats/ReportRows/GetReportParmByRowIDAndColNum?rowId=" + $("#rowId").val() + "&rpId=" + $("#rpId").val() + "&colNum=" + $("#colN").val(),
                        page: { curr: 1 }
                    });
                });
            }).fail(function (error) {
                console.log(error);
            });
        });

        function batchDelParm() {
            exLayer.confirm("确定要删除吗？", function (index) {
                layer.close(index);
                var idsStr = "";
                var checkStatus = table.checkStatus("parmList");
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        idsStr += checkStatus.data[i].Id + ",";
                    }
                } else {
                    layer.msg("未选择有效数据");
                }
                if (idsStr) {
                    exUtils.ajax("/SysStats/ReportRows/BatchDelParm", "get", { idsStr: idsStr }, true).done(function (response) {
                        exUtils.tableSuccessMsg(response.message);
                        parmListTable.reload({
                            url: "/SysStats/ReportRows/GetReportParmByRowIDAndColNum?rowId=" + $("#rowId").val() + "&rpId=" + $("#rpId").val() + "&colNum=" + $("#colN").val(),
                            page: { curr: 1 }
                        });
                    }).fail(function (error) {
                        console.log(error);
                    });
                }
            });
        }

        form.on('select(selectfilter)', function (data) {
            $("#parmValue").removeAttr("lay-verify");
            exUtils.ajax("/SysStats/IndexParm/GetParmType", "get", { id: data.value }, true).done(function (response) {
                if (response.extra == 'int') {
                    $("#parmValue").attr("placeholder", "请输入参数值，必须是数字");
                    $("#parmValue").attr("lay-verify", "required|number");
                }
                if (response.extra == 'decimal') {
                    $("#parmValue").attr("placeholder", "请输入参数值，必须是数字");
                    $("#parmValue").attr("lay-verify", "required|number");
                }
                if (response.extra == 'DateTime') {
                    $("#parmValue").attr("placeholder", "请输入参数值，必须是日期");
                    $("#parmValue").attr("lay-verify", "required|date");
                }

            }).fail(function (error) {
                console.log(error);
            });
        })

        $('#addIndex').on('click', function () {
            exLayer.openMiddle("新建指标", "/SysStats/IndexStats/Add?frm=list2", '100%', '100%', layui.device().mobile);
        });

        //消息提示
        $(document).on("mouseenter", "*[lay-tips]", function () {
            var remind = $(this).attr("lay-tips");
            var tips = $(this).data("offset") || 4;
            var color = $(this).data("color") || '#88858e';
            layer.tips(remind, this, {
                time: -1,
                tips: [tips, color],
                area: ['auto', 'auto'],
            });
        }).on("mouseleave", "*[lay-tips]", function () {
            layer.closeAll("tips");
        });

    });
</script>

<script type="text/html" id="toolbarTpl">
    <div class="layui-inline">
        <span style="color: #FE7300;">选择后，需点击编辑单元格按钮</span>
    </div>
</script>
<script type="text/html" id="toolbarTp2">
    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchDelParm" id="batchDelParm"><i class="fa fa-trash-o"></i></button>
</script>

<!-- 行工具栏模板 -->
<script type="text/html" id="operation_Tpl">
    <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="selectIndex" id="select">选择</a>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operation_Tp2">
    <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="indexDetails">
        <i class="fa fa-search-plus"></i>
    </a>
</script>